<template>
  <div class="page-content pt-24">
    <div class="layout">
      <div class="left mr-24">
        <news-title :obj="newsDetail" />

        <div class="video-content">
          <video
            width="100%"
            id="media"
            class="video-box"
            :src="newsDetail.video_url"
            :poster="newsDetail.thumbs ? newsDetail.thumbs[0] : ''"
            x-webkit-airplay="allow"
            x5-video-player-fullscreen="true"
            controls
            x5-video-orientation="landscape|portrait"
            loop="loop"
            preload="auto"
          >
            {{ $t('Your_browser_does_not_support_video_hashtag') }}
          </video>
        </div>

        <link-topic
          v-if="
            newsDetail.relation_subjects &&
            newsDetail.relation_subjects.length > 0
          "
          :obj="newsDetail.relation_subjects[0]"
        />

        <statement />

        <share-box :obj="newsDetail" />

        <div class="cross-line mb-48"></div>
        <comment :obj="newsDetail" />
      </div>
      <div class="right">
        <hot-and-recommended :hot-list="hotList" :related-list="relatedList" />
      </div>
    </div>
  </div>
</template>

<script>
import HotAndRecommended from '@/components/HotAndRecommended.vue';
import NewsTitle from '@/components/NewsTitle.vue';
import ShareBox from '@/components/ShareBox.vue';
import Statement from '@/components/Statement.vue';
import Comment from '@/components/Comment.vue';
import LinkTopic from '@/components/LinkTopic.vue';

export default {
  name: 'VlogPage',

  components: {
    HotAndRecommended,
    NewsTitle,
    ShareBox,
    Statement,
    Comment,
    LinkTopic
  },

  async asyncData({ $API, params, error }) {
    const id = params.id.replace(/\.html$/, '');

    const [newsDetail, hotList, relatedList] = await Promise.all([
      $API.articleGetNewsDetail({
        news_id: id,
        news_type: 8
      }),
      $API.articleGetAuthorHotNews({
        newsId: id
      }),
      $API.articleGetRelatedList({
        newsType: 8,
        news_id: id
      })
    ]);

    if (!newsDetail) {
      return error({ statusCode: 404 });
    }

    return {
      newsDetail,
      hotList,
      relatedList
    };
  },

  data() {
    return {
      hideLan: true, // 禁止切换语言
      channelListData: [], // 频道列表
      channelId: '', // 频道id
      banner_list: {}, // banner
      isOpenCoin: false, // 金币任务开启,
      newsDetail: {}, // 图文详情
      related_list: [], // 精彩推荐数据
      vshareConfig: {}, // 分享配置
      scrollTop: '', // 获取滚动条到顶部的距离
      scrollHeight: '', // 获取文档区域高度
      windowHeight: '', //获取window的高度
      hotList: [], // 热门作品
      relatedList: [] // 精彩推荐
    };
  },

  head() {
    const video = this.newsDetail;
    return this.$mergeSeoHead(this.$getVideoSeoHead(video), {
      script: [
        {
          src: '/share/social-share.min.js',
          type: 'text/javascript',
          charset: 'utf-8'
        }
      ],
      link: [{ rel: 'stylesheet', href: '/share/share.min.css' }]
    });
  },

  created() {
    this.vshareConfig = {
      // 此处放分享列表（ID）
      shareList: ['fbook', 'twi', 'weixin'],

      // 此处放置通用设置
      common: {
        bdText: this.newsDetail.title, // 分享的内容
        bdDesc: this.newsDetail.summary, // 分享的摘要
        bdPic: this.newsDetail.thumbs[0] // 分享的图片
      },
      share: [{}],
      slide: false, // 此处放置浮窗分享设置
      image: false, // 此处放置图片分享设置,
      selectShare: false // 此处放置划词分享设置
    };
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .layout {
    display: flex;

    .left {
      width: $page-left-width;
    }

    .right {
      width: $page-right-width;
    }
  }
}

.cross-line {
  width: 712px;
  height: 2px;
  background: rgba(12, 12, 28, 0.08);
  border-radius: 1px;
}

.video-content {
  padding: 24px 64px;
}
</style>
